<!-- 这个是登录的页面 -->
<template>
    <div class="register_container">
        <!-- 登录的表单 -->
        <div class="register_box">
            <h1>注册</h1>
            <!-- 表单位置 -->
            <el-form
                ref="registerFormRef"
                :rules="registerRules"
                :model="registerForm"
                class="register_form"
                label-width="80px"
            >
                <el-form-item label="角色" prop="rId">
                    <!-- 直接使用这个框架里面的icon -->
                    <el-select v-model="registerForm.rId" placeholder="请选择">
                        <el-option
                            v-for="item in roles"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" prop="loginName">
                    <!-- 直接使用这个框架里面的icon -->
                    <el-input
                        v-model="registerForm.loginName"
                        prefix-icon="iconfont icondenglu"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="loginPassword">
                    <el-input
                        v-model="registerForm.loginPassword"
                        prefix-icon="iconfont iconmima"
                        type="password"
                    ></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input
                        v-model="registerForm.phone"
                        prefix-icon="iconfont iconmima"
                        type="phone"
                    ></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input
                        v-model="registerForm.idCard"
                        prefix-icon="iconfont iconmima"
                        type="idcard"
                    ></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input
                        style="
                            width: 230px;
                            margin-right: 10px;
                            vertical-align: top;
                        "
                        v-model="registerForm.code"
                        prefix-icon="el-icon-s-check"
                    >
                    </el-input>
                    <el-image
                        style="width: 100px; height: 40px"
                        :src="img"
                        @click="getImgAndKey"
                    ></el-image>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="handleRegister"
                        >登录</el-button
                    >
                    <div class="btns-right">
                        <el-button type="primary" @click="handleregister"
                            >提交</el-button
                        >
                        <el-button type="success" @click="handleReset"
                            >重置</el-button
                        >
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Qs from "qs";
import { mapMutations } from "vuex";
import * as type from "../store/mutation-types";
export default {
    data() {
        return {
            //表单数据
            registerForm: {
                loginName: "",
                loginPassword: "",
                phone: "",
                idCard: "",
                code: "",
                rId: "",
            },
            key: "",
            img: "",
            roles:[],
            //验证对象
            registerRules: {
                loginName: [
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "blur",
                    },
                    {
                        min: 5,
                        max: 11,
                        message: "长度在 5 到 11 个字符",
                        trigger: "blur",
                    },
                ],
                loginPassword: [
                    {
                        required: true,
                        message: "请输入密码名称",
                        trigger: "blur",
                    },
                    {
                        min: 5,
                        max: 11,
                        message: "长度在 5 到 11 个字符",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入电话号码",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        max: 11,
                        message: "长度必须是11位",
                        trigger: "blur",
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: "请输入身份证号码",
                        trigger: "blur",
                    },
                    {
                        min: 18,
                        max: 18,
                        message: "长度必须是18位",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入验证码名称",
                        trigger: "blur",
                    },
                ],
                rId: [
                    {
                        required: true,
                        message: "请选择角色",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getImgAndKey();
        this.getRoles();
    },
    methods: {
        ...mapMutations({
            saveCurUser: type.SET_CUR_USER,
            saveLeftMenu: type.SET_LEFT_MENU,
            saveToken: type.SET_TOKEN,
        }),

        handleRegister() {
            this.$router.push("login");
        },

        async getImgAndKey() {
            let { data: res } = await this.$http.get("/sysuser/captcha");
            this.key = res.key;
            this.img = res.img;
        },
        async getRoles() {
            let json1 = {
                page: 1,
                limit: 1000,
            };
            let { data: res } = await this.$http.post(
                "/role/page",
                Qs.stringify(json1)
            );
            this.roles = res.data.list
                .filter((item) => {
                    if (item.name == "管理员") {
                        return false;
                    } else {
                        return true;
                    }
                })
                .map((item) => {
                    return {
                        label: item.name,
                        value: item.id,
                    };
                });
        },

        handleReset() {
            //通过重置表单可以做到这个表单的信息进行重置
            this.$refs.registerFormRef.resetFields();
        },

        handleregister() {
            //在这个地方可以帮我们验证是否成功，成功了就是成功了，然后就可以编写其他的代码了
            this.$refs.registerFormRef.validate(async (valid) => {
                if (valid) {
                    //如果验证成功
                    //首相在这个地方，返回的是一个对象，而且这个地想里面含有很多数据，
                    //在这个地方主要使用的就是这个解析的语法，在这个地方就可以很好的使用这个语法了，然后就可以很好的之后的访问了
                    let json1 = {
                        loginName: this.registerForm.loginName,
                        loginPassword: this.registerForm.loginPassword,
                        phone: this.registerForm.phone,
                        idCard: this.registerForm.idCard,
                        code: this.registerForm.code,
                        key: this.key,
                        rId: this.registerForm.rId,
                    };
                    let { data: res } = await this.$http.post(
                        "/sysuser/register",
                        Qs.stringify(json1)
                    );
                    //然后在这个地方是进行处理这个登录的，然后就可以很好的进行这个之后的操作。
                    if (res.code == 200) {
                        this.$message.success("注册成功！"); //信息提示
                        this.$router.push("/login");
                    } else {
                        this.$message.warning(res.msg); //信息的提示
                    }
                } else {
                    //如果失败
                    return;
                }
            });
        },
    },
};
</script>


<style lang="less" scoped>
.el-form-item .el-select {
    width: 100%;
}
.register_container {
    background-color: #919497;
    height: 100%;
}

.register_box {
    width: 450px;
    height: 550px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    h1 {
        text-align: center;
    }
}

.btns {
    position: relative;
    .btns-left {
        display: inline-block;
    }
    .btns-right {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
    }
}

.register_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    .code {
        width: 30%;
        height: 100%;
        display: inline-block;
    }
}
</style>
